<template>
	<view class="add-bank h100vh bggray">
		<view class="top mb30 fs22">为保障正常绑卡，需收集您的卡片信息和身份信息</view>

		<view class="section fs26">
			<view class="fs30 pl30 mb20">填写卡片信息</view>

			<view class="flex mb40 flex-ver flex-sb bgcfff item">
				<picker :range="bankList" @change="pickerChange" :value="index" range-key="name" class="flex-1">
					<view class="name-color pay-type">{{bankName ? bankName : '请选择银行'}}</view>
				</picker>
				<image :src="backIcon" class="rotate-back-icon"></image>
			</view>

			<view>
				<input type="number" v-model="number" placeholder="请输入银行卡号" class="bgcfff item">
			</view>

			<view class="fs30 pl30 mb20 mt20">完善身份信息</view>
			<view>
				<input type="text" v-model="name" placeholder="请输入持卡人姓名" class="bgcfff item">
			</view>
		</view>


		<view class="smt-btn-area pl20">
			<view class="smt-btn" @click="addBank">确认</view>
		</view>



	</view>
</template>

<script>

import {bankAdd,getBankList} from '@/api/user/bank'
	export default {
		data() {
			return {
				name: '',
				number: '',
				bankName: '',
				bankId: '',
				index: 0, //默认显示下标0的
				bankList: [

				],
				backIcon: this.$common.imgUrl() + '/back.png',
			}
		},
		components: {

		},
		async onLoad(query) {
			await this.getBankList();
		},
		onShow() {},
		mounted() {},
		methods: {

			validateAll(){
				if(!this.bankId){
					this.$utils.showToast('请选择银行');
					return false;
				}

				if(!this.number){
					this.$utils.showToast('请输入银行卡号');
					return false;
				}

				if(!this.name){
					this.$utils.showToast('请填写持卡人姓名');
					return false;
				}

				return true;
			},
			async addBank() {


				let isValid = this.validateAll();
				if(!isValid) return;
        bankAdd({
          id: this.bankId,
          number: this.number,
          name: this.name
        }).then(res=>{
          this.$utils.showToast('添加成功');
          setTimeout(() => {
            uni.navigateBack();
          }, 1500)
        })
			},
			async getBankList() {
        getBankList().then(res=>{
          this.bankList = res.data;
        })
			},
			confirm() {},
			pickerChange(e) {
				this.bankName = this.bankList[e.detail.value].name;
				this.bankId = this.bankList[e.detail.value].id;
			},
		}
	}
</script>

<style lang="scss">
	.pay-type {
		height: 97rpx;
		line-height: 97rpx;
	}

	.top {
		width: 750rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #D79F76;
		background: #FEEED4;
	}

	.section {
		padding: 30rpx;

		.item {
			height: 97rpx;
			padding: 0 30rpx;
			border-radius: 11rpx;
		}
	}

	.smt-btn-area {
		width: 100%;
		position: absolute;
		bottom: 100rpx;

		.smt-btn {
			width: 707rpx;
			height: 98rpx;
			text-align: center;
			line-height: 98rpx;
			color: #fff;
			border-radius: 49rpx;
			background: linear-gradient(-90deg, #37A9FF, #6DFFFF);
		}
	}
</style>
